<template>
	
	<view class="content">
		
		<view class="addr_info_box">
			<view class="input_box">
				<view class="input_tab_name">姓名</view>
				<view class="input_value_box">
					<input class="input_value" placeholder="许生" placeholder-class="placeholderss"/>
				</view>
			</view>
		</view>
		
		<view class="addr_info_box">
			<view class="input_box">
				<view class="input_tab_name">电话</view>
				<view class="input_value_box">
					<input class="input_value" placeholder="13531013644" placeholder-class="placeholderss"/>
				</view>
			</view>
		</view>
		
		<view class="addr_info_box">
			<view class="input_box">
				<view class="input_tab_name">省市区</view>
					<view class="input_value_box">
						<!-- <input class="input_value" placeholder="广东省 广州市 番禺区" placeholder-class="placeholderss"/> -->
						<pickerAddress @change="change">{{txt}}</pickerAddress>
					</view>
				<view class="right_icon"></view>
			</view>
		</view>
		
		<view class="addr_info_box">
			<view class="textarea_box">
				<view class="input_tab_name">详情地址</view>
				<view class="input_value_box">
					<textarea class="textarea_value" placeholder="汉溪大道东362号粤海广场写字楼38层3807室" placeholder-class="placeholderss"/>
					
				</view>
			</view>
		</view>
		
		
		<view class="setting_box">
			
			<view class="setting_name">设置为默认地址</view>
			<view class="check_button">
				<switch color="#58BCFF" checked  />
			</view>
		</view>
		
		<!-- <view class="line"></view> -->
		
		<view class="add_addr_button">添加地址</view>
	</view>
</template>

<script>
	
	 import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue'
	    export default {
	        components:{
	            pickerAddress
	        },
	        data() {
	            return {
	                txt: '广东省 广州市 番禺区',
	                title: 'Hello'
	            }
	        },
	        onLoad() {
	
	        },
	        methods: {
	            change(data) {
	                this.txt = data.data.join(' ')
	                console.log(data.data.join(''))
	            }
	        }
	    }
</script>

<style>
	
	page{
		background-color: #F8F8F8;
	}
	.addr_info_box{
		height: 127upx;
		padding-left: 24upx;
		background-color: #FFFFFF;
		margin-top: 2upx;
		display: flex;
		align-items: center;
	}
	.input_box{
		display: flex;
		align-items: baseline;
	}
	.textarea_box{
		display: flex;
	}
	.input_tab_name{
		width: 112upx;
		font-size: 28upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 40upx;
	}
	.input_value_box{
		margin-left: 60upx;
	}
	.input_value{
		
	}
	.textarea_value{
		width: 483upx;
		height: 80upx;
	}
	.placeholderss{
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}

	.right_icon{
		width: 20upx;
		height: 20upx;
		border-top: 3upx solid #666666;
		border-right: 3upx solid #666666;
		transform: rotate(45deg);
		position: absolute;
		right: 54upx;
		top: 310upx;
	}
	
	.setting_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
		margin-top: 24upx;
		padding: 28upx 48upx 24upx 24upx;
	}
	
	.setting_name{

		font-size: 28upx;
		font-weight: 400;
		color: #333333;
		line-height: 40upx;
	}
	
	.line{
		width: 750upx;
		height: 4upx;
		background: #D8D8D8;
		opacity: 0.2;
		position: relative;
		margin: 0 auto;
		right: 23upx;
	}
	
	.add_addr_button{
		width: 702upx;
		/* height: 88upx; */
		background: #58BCFF;
		border-radius: 8upx;
		position: fixed;
		bottom: 100upx;
		left: 22upx;
		text-align: center;
		line-height: 88upx;
		font-size: 32upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>
